<template>
	<view class="main">
		<view class="main_body">
			<view class="content">
		    <view class="head">
		        <text>找回密码</text>
		        <image
							src="../../static/img/logo.png"
							style="margin: 20rpx 0; width:230rpx; height:80rpx"
					 ></image>
		    </view>
		    <view class="item_body">
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="text" v-model="form.phone" placeholder="手机号码" ></view>
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="password" v-model="form.password"  placeholder="密码"></view>
		        <div class="baikuang" style="display: flex;">
		        	<input type="text" class="item_input" v-model="form.phonecode" placeholder="输入短信验证码" style="color:#999"> 
		        	<view class="yzmbtn" v-if="isCountdown" @tap="sendMessge">获取验证码</view>
		        	<view class="yzmbtn" v-else>{{ countdown }}秒</view>
		        </div>
						<view class="baikuang">
							<xl-slider-verify @success="verifySuccess" :reset="false"></xl-slider-verify>
						</view>
		        <button class="loginbut" @click="loginBut" >提交</button>
						<view class="item_bottom">
							<view @tap="goto('/pages/login/register')">没有账号？立即注册</view>
							<view @tap="goto('/pages/login/login')">我有账号</view>
						</view>
		    </view>
			</view>
		</view>
	</view>
</template>
<script>
	import { retrievePassword } from '@/api/login.js'
	import xlSliderVerify from '@/components/xl-slider-verify/xl-slider-verify.vue'
	export default {
		components:{
			xlSliderVerify
		},
		data() {
			return {
				form: {
					phone: '',
					password: '',
					phonecode: '',
				},
				isCountdown: true,
				countdown: 60,
			}
		},
		onLoad() {
			
		},
		methods: {
			verifySuccess(){
				console.log('验证成功')
			},
			//获取验证码
			sendMessge() {
			  const that = this
			  if (that.form.phone === '') {
			    uni.showModal({
			      showCancel: false,
			      title: '失败提示',
			      content: '请输入手机号'
			    })
			    return
			  }
				that.setCountdown(90)
			},
			setCountdown(num = 60) {
			  const that = this
			  that.isCountdown = false
			  that.countdown = num
			  that.timer = setInterval(() => {
			    that.countdown--
			    if (that.countdown === 0) {
			      that.isCountdown = true
			      clearInterval(that.timer)
			    }
			  }, 1000)
			},
			
			loginBut(){
				let that = this
				if (this.form.phone == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写手机号码'
					});
				}
				if (this.form.password == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写密码'
					});
				}
				if (this.form.phonecode == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写手机验证码'
					});
				}
				let data = {
					phone:this.form.phone,
					phonecode:this.form.phonecode,
					password:this.form.password
				}
				retrievePassword(data).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								that.goto = '/pages/login/login'
							}
						});
					}
					else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			goto(tourl) {
				uni.redirectTo({
					url: tourl
				});
			}
		}
	}
</script>

<style>
    .head{
			width: 100%;
			margin-top: 150rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.head text{
			height: 120rpx;
			line-height: 120rpx;
			font-size: 60rpx;
			text-align: center;
			letter-spacing:40rpx;
			text-indent: 40rpx;
			color: #fff;
    }
		.head .logoimg{
			width: 230rpx;
			height: 80rpx;
			margin: 40rpx auto;
		}
		
		.item_body{
			background:rgba(0,38,53,0.5);
			padding: 50rpx 26rpx;
			display: flex;
			flex-wrap: wrap;
			border-radius: 30rpx;
		}

		.item_body .baikuang{
			width: 100%;
			position: relative;
			margin-bottom: 40rpx;
		}
		.item_body .baikuang .item_input{
			background:rgba(77,94,104,0.5);
			height: 76rpx;
			line-height: 76rpx;
			padding-left: 25rpx;
			color: #fff;
		}
		.item_body .baikuang .yzmbtn{
			position: absolute;
			background-color: #fff;
			width: 220rpx;
			margin: auth;
			text-align: center;
			height: 76rpx;
			line-height: 76rpx;
			right: 0;
			top: 0;
		}
		.loginbut {
		    width: 100%;
		    height: 80rpx;
		    display: block;
		    line-height: 80rpx;
		    background: #43e4f8;
		    border-radius: 10rpx;
		    font-size: 28rpx;
		    color: #fff;
		    text-align: center;
		    border: #43e4f8 solid 4rpx;
		}
    .item_bottom{
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: #fff;
			height: 50rpx;
			margin: 40rpx 0;
		}
</style>